<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>

 <div id="app"></div>

<script>


    /*
		生命周期的钩子函数   函数
		beforeCreate
		created
		beforeMount
		mounted
		beforeUpdate
		updated
		activated
		deactivated
		beforeDestroy
		destroyed


		*/

    var APP={
        template: `<div id="main" ="isShow">{{msg}}

         <button @click="destroyedAction">销毁</button>
         <button @click="updateAction">改变</button>

        </div>

`


        ,

        data:function(){

            return{

                msg:"我是入口",
                isShow:true
            }
        },

        beforeCreate:function () {
            console.log("组件创建之前");
            console.log("------------" + this.msg);
        },
        created:function () {

            //发送AJAx请求
            console.log("组件被创建");
            console.log("------------" + this.msg);

        },

        beforeMount:function () {

            console.log("数据挂载到DOM之前");
            console.log(document.getElementById("app"));
        },


        mounted:function () {

            console.log("数据挂载到DOM之后");
            console.log(document.getElementById("app"));
        },
        beforeUpdate:function(){
            console.log("数据更新之前")


        },
        updated:function(){

            console.log("数据更新之后")

        },

        beforeDestroy:function(){
            console.log("组件在销毁之前");
        },
        destroyed:function(){
          console.log("组件被销毁之后")
        },

        methods:{

            updateAction:function () {
                this.msg="邢伟新"
            },
            destroyedAction:function () {

                this.isShow = !this.isShow;
            }
        }



    }


    new Vue({

        el:"#app",
        template:`<APP />`,
        data:function () {
            return{

            }
        },
        components:{

            APP
        }

    })



</script>





<body>

</body>
</html>